<template>
  <DefaultLayout>
    <!-- 使用 Tailwind 来控制背景亮度 -->
    <v-img
      class="fullscreen-image"
      width="100vw"
      height="100vh"
      aspect-ratio="16/9"
      cover
      src="@/assets/a.jpg"
    />
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from "@/layouts/DefaultLayout.vue";
</script>

<style scoped>
/* 确保布局的容器占据屏幕 */
html, body, #app {
  height: 100%;
  margin: 0;
}

/* 图像的基础样式 */
.fullscreen-image {
  object-fit: cover; /* 保证图像覆盖整个区域 */
  position: fixed;    /* 使用固定定位，使图像固定在屏幕上 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;        /* 图像在内容后面 */
}
</style>
